<template>
	<view class="body">
		<xk-header title="专项检查"></xk-header>
		<view class="list" >
			<view class="list-item header" @click="orderMore = !orderMore">
				<view>计划编号:  {{data.plan_no}}</view>
				<image v-if="!orderMore" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view v-if="orderMore" class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">计划名称：</view>{{data.plan_name}}</view>
					<view class="info-item"><view class="key">检查内容：</view>{{data.sinspection_content}}</view>
					<view class="info-item"><view class="key">检查日期：</view>{{data.plan_date}}</view>
					<view class="info-item"><view class="key">检查负责人：</view>{{data.inspect_user_name}}</view>
				</view>
			</view>
		</view>
		<swiper class="swiper" :style="'height:'+swiperHeight + 'px'" :current="current"
		 :duration="duration" @change="swiperTab">
			<swiper-item v-for="(item, index) in errorDets" :key="index">
				<view class="swiper-item">
					<view class="swiper-info" style="padding-bottom: 0rpx;">
						<view class="title">
							<view>检查明细</view>
							<view class="right-title">
								共<view style="margin: 0 6rpx;color: #2C72FF;">{{errorDets.length}}</view>个巡查项
							</view>
						</view>
						<view class="sub-title">{{index + 1}}/{{errorDets.length}} 巡查项</view>
						<view class="content">
							<text>
								物业片区：{{item.property_building}}/{{item.property_storey}}/{{item.property_room}}
								物业编号：{{item.property_code}}
								物业分类：{{item.property_type_name}}
								重点检查内容：{{item.check_content}}
								异常描述：{{item.abnormal_desc}}
							</text>
						</view>
						<!-- <picker class="list" style="margin: 20rpx 0;background-color: #F8F8F8;" :range="solutionType" :value="solutionList.indexOf(item.solution_type_value)" range-key="data_text"
							@change="(e)=>{solutionTypeChange(e, item)}">
							<view class="list-item">
								<view style="color:#CCCCCC" v-if="!item.solution_type_text">请选择工作类型</view>
								<view v-if="item.solution_type_text">{{item.solution_type_text}}</view>
								<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
							</view>
						</picker> -->
						<view style="margin-bottom: 20rpx;">整改类型：</view>
						<view class="types-list">
							<view v-for="(solu, index) of solutionType" @click="clickSolutionType(solu, item)" :class="(item.solution_type_value || '').indexOf(solu.data_value) != -1 ? 'sel-item type-item' : 'type-item'">
								{{solu.data_text}}
							</view>
						</view>
						<view style="margin-top: 20rpx;">
							<input class="result-input" v-model="item.solution_desc" placeholder="请输入整改方案" placeholder-class="placeholder" />
						</view>

						<view v-if="errorDets.length > 1" class="handle-btn">
							<view v-if="index != 0" @click="()=>{current--}">上一项</view>
							<view v-if="index != errorDets.length - 1" @click="()=>{current++}">下一项</view>
						</view>
						<view v-else style="height: 20rpx;"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="list" >
			<view class="list-item header" >
				<view>现场照片</view>
			</view>
			<view class="data-item">
				<view class="order-info">
					<view v-if="data.record_image" class="info-item"><view class="key">现场照片</view>
						<image-list :pics="data.record_image"></image-list>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="from-item" style="margin-top: 20rpx;">
			<view class="title">检查记录</view>
			<textarea type="text" placeholder="在此输入巡查检查记录" placeholder-class="placeholder"/>
		</view> -->

		<view class="from-item upload-img-item" style="margin-top: 20rpx;">
			<view class="title">上传现场图片</view>
			<upload-image :images="formInfo.solution_image" @onChange="(images) => {formInfo.solution_image = images}"/>
		</view>

		<view class="from-item">
			<view class="title">备注</view>
			<textarea v-model="formInfo.solution_remark" type="text" placeholder="在此输入备注" placeholder-class="placeholder"/>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="submitTask">提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderMore: true,
				swiperHeight: 624,
				touchable: true, //禁止手指滑动切换
				duration: 500, //滑动时长
				current: 0, //当前显示的下标
				data: {},
				errorDets: [],
				solutionType: [],
				solutionList: [],
				formInfo:{
					spection_id: '',
					// solution_type: '10',
					solution_content: '',
					solution_image: '',
					solution_remark: '',
					isSubmit: true,

				}
			};
		},
		onLoad(options){
			this.formInfo.spection_id = options.spectionId
			this.getData()
		},
		onShow(){
			this.setSwiperHeight()
		},
		methods:{
			getData(){
				this.$api.baseData_getToolDataList({code: 'PM_SINSPECTION_SOLUTION_TYPE' + '_nostr'}).then(res =>{
					this.solutionType = res
					let solutionList = []
					for(let item of res){
						solutionList.push(res.data_value)
					}
					this.solutionList = solutionList
				})
				this.$api.baseData_getPmSinspection(this.formInfo.spection_id).then((res)=>{
					let errorDets = []
					for(let item of res.task.dets){
						if(item.is_abnormal == '1'){
							item.soluType = []
							item.solution_type_text = (item.solution_type_text || '');
							item.solution_type_value = (item.solution_type_value || '');
							let typeText = item.solution_type_text.split(';')
							let typeValue = item.solution_type_text.split(';')
							for(let i in typeValue){
								if(typeText[i]){
									item.soluType.push({
										solution_type_text: typeText[i],
										solution_type_value: typeValue[i]
									})
								}
							}
							errorDets.push(item)
						}
					}
					this.errorDets = errorDets;
					// console.log('this.errorDets',this.errorDets)
					this.data = res.task
				})
			},
			clickSolutionType(item, data){
				let isDel = false
				for(let i in data.soluType){
					let it = data.soluType[i]
					if(it.solution_type_value == item.data_value){
						isDel = true;
						data.soluType.splice(i, 1);
					}
				}
				if(!isDel){
					data.soluType.push({
						solution_type_value: item.data_value,
						solution_type_text: item.data_text
					})
				}

				data.solution_type_text = ''
				data.solution_type_value = ''
				for(let it of data.soluType){
					data.solution_type_text += it.solution_type_text
					data.solution_type_text += ';'
					data.solution_type_value += it.solution_type_value
					data.solution_type_value += ';'
				}
				if(data.solution_type_text){
					data.solution_type_text = data.solution_type_text.substr(0, data.solution_type_text.length - 1)
					data.solution_type_value = data.solution_type_value.substr(0, data.solution_type_value.length - 1)
				}
				console.log('data.soluType', data)
			},
			swiperTab(e) {
				this.current = parseInt(e.target.current);
				this.setSwiperHeight()
			},
			setSwiperHeight() {
				this.$util.getElRect('.swiper-item').then(res=>{
					this.swiperHeight = res.height;
				})

			},
			submitTask(){
				let isFinish = true;
				let isErrorNoDesc = false;
				for(let item of this.errorDets){
					if(!item.solution_desc || !item.solution_type_text){
						isFinish = false
						break
					}
				}
				if(!isFinish){
					this.$util.alert({
						content: "存在未整改项，无法完成提交",
					})
					return
				}
				this.$util.confirm({
					content: "确定提交完成整改？",
					confirmText: "确定"
				}).then(isConfirm => {
					if (isConfirm) {
						let detsData = [];
						for(let item of this.errorDets){
							this.formInfo.solution_content += item.solution_desc
							this.formInfo.solution_content += '\n'
							detsData.push({
								sinspection_det_id: item.sinspection_det_id,
								solution_desc: item.solution_desc,
								solution_type_text: item.solution_type_text,
								solution_type_value: item.solution_type_value,
							})
						}
						this.$util.post({
							url: "app/pmSinspection/rectify",
							data: {
								dets: detsData,
								...this.formInfo
							}
						}).then(res => {
							uni.$emit('refreshHomeDataList')
							uni.$emit('refreshSpecialCheck')
							uni.redirectTo({
								url: '/pagesA/special-check/special-check-finish?type=fix'
							})
						})

					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
@import '@/common/from.scss';
.result-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	.radio{
		display: flex;
		.r-item{
			display: flex;
			align-items: center;

			margin-right: 40rpx;
		}
	}
}
.types-list{
	display: flex;
	flex-wrap: wrap;
	.type-item{
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;
		margin: 0 20rpx 20rpx 0;
		background: #F2F5FB;
		border: 1px solid #F2F5FB;
		color: #666666;
	}
	.sel-item{
		background: #F1F6FF;
		border: 1px solid #2C72FF;
		color: #2C72FF;
	}


}
</style>
